<template>
    <div class="user_basic_info_box">
        <div class="user_info">
            <div class="avatar" >
                <img :src="user.head_image || '/public/yonghu.png' " width="100%" height="100%" style="border-radius: 50%;"  >
            </div>
            <div class="details">
                <div class="name">{{user.name }}</div>
                <div class="stats">
                    <!-- <span>粉丝数: {{ test_info.followers }}</span> -->
                    <!-- <span>关注: {{ test_info.following }}</span> -->
                </div>
            </div>
        </div>
        <div class="additional_info">
            <!-- 这里可以放其他信息 -->
            
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted,defineProps, inject, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const props = defineProps({
    user: {
        type: Object,
        default: () => ({}),
    }
})
const test_info = ref({
    name: '123',
    id: 1,
    followers: 100, // 粉丝数
    following: 50, // 关注数
});

onMounted(() => {
    // 这里可以放初始化逻辑

});
</script>

<style scoped>
.user_basic_info_box {
    display: flex;
    align-items: center;
    padding: 10px;
    height: 100%;
    /* background-color: #f5f5f5; */
    border-radius: 8px;
}

.user_info {
    display: flex;
    align-items: center;
    width: 60%;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
    border: 1px solid black;
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.name {
    font-size: 20px;
    font-weight: 800;
    color: #17233d;
    margin-bottom: 10px;
}

.stats {
    font-size: 16px;
    color: #666;
}

.stats span {
    margin-right: 10px;
}

.additional_info {
    width: 40%;
    text-align: center;
    font-size: 16px;
    color: #333;
}
</style>